<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsTest</title>
    
    <style>  
    </style>
</head>

<body>
    <header>
        <h1>JS Test</h1>
        <input 
            type="button"
            value="按钮"
            onclick="fun1(), fun2()"
        >
        <br>
        <input
            type="text"
            onkeyup="fun7()"
            onkeydown="fun8()"
        >
            <br>
        <img 
            src="/img/屏幕截图 2023-11-09 013546.png"
            onmousemove="fun4()"
        >

    </header>
    
    <footer>
        <p>&copy; 2024 Sherbledore. All rights reserved.</p>
    </footer>
    
    <script>
    
        function fun1(){
            alert("fuck!")
        }
        function fun2(){
            console.log("点击了")
        }

        function fun3(){
            alert("鼠标悬停了")
        }
        function fun4(){
            console.log("鼠标移动了")
        }

        function fun7(){
            console.log("键盘抬起")
        }
        function fun8(){
            console.log("键盘按下")
        }
        
        function testFocus(){
            console.log("获取焦点")
        }
        function testBlur(){
            console.log("失去焦点")
        }
        function testChange(value){
            console.log("内容改变:"+value)
        }
        function testChange2(value){
            console.log("选项内容改变:"+value)
        }
    </script>
</body>

<form action="" method="">
    用户名:<input type="text" name="username"
                onfocus="testFocus()"
                onblur="testBlur()"
                onchange="testChange(this.value)"><br>
    密码:<input type="text" name="password"><br>
    <input type="button" value="登录">
    <input type="button" value="清空">
    <br><br>

    <select onchange="testChange2(this.value)">
        <option>重庆</option>
        <option>菏泽</option>
        <option>青岛</option>
    </select>
</form>

</html>